<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>资料录入</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="/static/wx/lib/sui/sm.min.css">
    <link rel="stylesheet" href="/static/wx/lib/sui/sm-extend.min.css">
    <link rel="stylesheet" href="/static/wx/css/reset.css">
    <link rel="stylesheet" href="/static/wx/css/main.css">
    <link rel="stylesheet" href="/static/wx/css/public_main.css">
</head>

<body>
    <div class="page-group">
        <div class="page page-current" id="filerecord">

            <!-- 主内容 -->
            <div class="content">
                <div class="setp-card">
                    <div class="step-box">
                        <div class="step-item selected">
                            <div class="step-item-line">
                                <span></span>
                            </div>
                            <div class="step-item-text size-65">保单险种</div>
                        </div>
                        <div class="step-item selected">
                            <div class="step-item-line">
                                <span></span>
                            </div>
                            <div class="step-item-text size-65">货品信息</div>
                        </div>
                        <div class="step-item selected">
                            <div class="step-item-line">
                                <span></span>
                            </div>
                            <div class="step-item-text size-65">货品受损</div>
                        </div>
                        <div class="step-item">
                            <div class="step-item-line">
                                <span></span>
                            </div>
                            <div class="step-item-text size-65">货品现状</div>
                        </div>
                        <div class="step-item">
                            <div class="step-item-line">
                                <span></span>
                            </div>
                            <div class="step-item-text size-65">物权信息</div>
                        </div>

                    </div>
                </div>
                <input type="hidden" value="{$policy_num}" name ='policy_num'>
                <div class="bs-box">
                    <div class="bs-box-content">
                        <div class="bs-box-inner">
                            <div class="bs-box-content-item width-link size-m">
                                <div>受损时间</div>
                                <div>
                                    <input placeholder="请选择受损时间" id ='datetime-picker' value="{if isset($info.damage_at)}{$info.damage_at|substr=0,10}{/if}"/>
                                </div>
                            </div>
                            <div class="bs-box-content-item">
                                <p class="size-m">受损原因</p>
                                <div>
                                    <textarea class="size-m no-outline" placeholder="请输入受损原因" rows="3" style="width:100%;padding-right:.5rem;" id="damage_result" >{if isset($info.damage_result)}{$info.damage_result }{/if}</textarea>
                                </div>
                            </div>
                            <div class="bs-box-content-item width-link border-b-none">
                                <p class="size-m">货品所在地</p>
                                <div>
                                    <input class="size-m" type="text" placeholder="请选择省市区"  id="city"
                                    value="{if isset($addr) && !empty($addr)}{$addr}{/if}" />
                                    <!--<input class="size-m" type="text" placeholder="请选择省市区"  id="city" value="上海 浦东新区"/>-->
                                </div>
                            </div>
                            <div class="bs-box-content-item">
                                <input class="size-m" type="text" placeholder="详细门牌地址" name="address" value="{if isset($info.address_detail)}{$info.address_detail } {/if}"/>
                            </div>
                            <!--<div class="bs-box-content-item size-m width-link">-->
                                <!--<div>物品原值</div>-->
                                <!--<div>-->
                                    <!--<input placeholder="请填写" />-->
                                <!--</div>-->
                                <!--<div>万元</div>-->
                            <!--</div>-->
                            <div class="bs-box-content-item border-b-none">
                                <p class="size-m">第三方报告(选填)</p>
                                <div class="uploader">
                                    <ul class="uploader-files" id="uploader-files">
                                        {if !empty($info.other_report)}
                                        {volist name="info.other_report" id="vo"}
                                        <li class="uploader-file" style="background-image:url('/static/wx/imgs/img/text.jpg')">
                                            <span class="close">x</span>
                                            <a href="{$vo.url}" download>{$vo.name}</a>
                                        </li>
                                        {/volist}
                                        {/if}
                                    </ul>
                                    <div class="uploader-content">
                                        <div class="uploader-input-box">
                                            <input class="uploader-input" type="file" accept=".pdf,.doc,.xlsx" onchange="handleInputChange1(event)" name="avatar"/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="btn-box" style="margin-top: 1rem;">
                    <div class="flex">
                        <div class="pre-step my-btn" style="width:47%;" @click="preStep" id="preStep">
                            <span style="background-color: #fff;color:#000;">上一步</span>
                        </div>
                        <div class="pre-step my-btn" style="width:47%" @click="nextStep" id="nextStep">
                            <span class="active">下一步</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    </div>
    <script type='text/javascript' src='/static/wx/lib/sui/zepto.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='/static/wx/lib/sui/sm.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='/static/wx/lib/sui/sm-extend.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='/static/wx/lib/sui/sm-city-picker.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='/static/wx/js/upload.js' charset='utf-8'></script>
    <script>
        $(function () {
            // setAddres();
            // function   setAddres() {
            //     $str='';
            //     if({if isset($info.omit)} != ''){
            //         $str +=($info.omit);
            //     }
            //     console.log({$info.omit});
            //
            // }
            var myDate = new Date();
            var year = myDate.getFullYear();//获取年
            var month = myDate.getMonth()+1;////获取月
            var day = myDate.getDate();//获取日
            if (month < 10) month = "0" + month;
            if (day < 10) day = "0" + day;
            var time = year+"-"+month+"-"+day;
            var n = $('.step-box').children().length;
            $('.step-item').css('width', document.body.clientWidth / n + 'px')
            $("#datetime-picker").calendar({
                value: [time]
            });
            $("#city").cityPicker({
            });
            $(document).on('click', '#preStep', function () {
                var poliecy = $("input[ name='policy_num']").val();
                location.href="{:url('Recordor/step_2')}?policy_num="+poliecy;
            });
            $(document).on('click', '#nextStep', function () {
                var poliecy = $("input[ name='policy_num']").val();
                var damage_at= $("#datetime-picker").val();
                var damage_result= $("#damage_result").val();
                var addr= $("#city").val();
                var a= addr.split(' ');
                if(a.length ==2){
                    var omit='';
                    var city=a[0];
                    var classify=a[1];
                }else if(a.length ==3){
                    if(a[2] != ''){
                        var omit=a[0];
                        var city=a[1];
                        var classify=a[2];
                    }else {
                        var omit=a[2];
                        var city=a[0];
                        var classify=a[1];
                    }
                }
                var arr=[];
                var address_detail = $("input[ name='address']").val();
                $("#uploader-files  li a").each(function(index){
                    var url=$(this).attr('href');
                    arr.push(url);
                })
                $.ajax({
                    type: 'POST',
                    url: "{:url('Recordor/recordAdd')}",
                    data: {
                        'policy_num': poliecy,
                        'damage_at': damage_at,
                        'damage_result': damage_result,
                        'omit': omit,
                        'city': city,
                        'classify': classify,
                        'address_detail':address_detail,
                        'other_report':JSON.stringify( arr ),
                        'now_status':3
                    },
                    dataType: 'json',
                    success: function (Json) {
                        if (Json.code == 200) {
                            location.href="{:url('Recordor/step4')}?policy_num="+Json.data.policy_num;
                        } else {
                            $.alert('保存失败');
                        }
                    }
                });
            });

        });
        //获取对象
        function handleInputChange1(event) {
            //   console.log(event)
            var formData= handleInputChangebyFile(event);
            console.log(formData);
            uploadImg(formData);

        }
        // 上传图片
        function  uploadImg (formData) {
            $.ajax({
                type: 'POST',
                url: "{:url('upload/index')}",
                data: formData,
                processData: false,
                contentType: false,
                cache: false,
                success: function (Json) {
                    if (Json.code == 200) {
                        var url=decodeURI(Json.data.url)
                        var obj=url.lastIndexOf("/");
                        var name =url.substr(obj+1);
                        a="<li class=\"uploader-file\" style=\"background-image:url('/static/wx/imgs/img/text.jpg')\">";
                        a+= "<span class=\"close\">x</span>"
                        a+="<a href='"+url+ "' download>"+ name+"</a>"
                        a+= "</li>"
                        $('#uploader-files').append(a);
                    } else {
                        $.alert('上传失败');
                    }
                }
            });
        }


    </script>
</body>

</html>